<!DOCTYPE html>
<html>
    <head>
        <title>FlamingoStudio.vn | Backend</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="<?php echo base_url(); ?>static/css/bootstrap.min.css" rel="stylesheet"/>
        <style type="text/css">
            .th {
                float: left;
                width: 80px;
                margin-top: 5px;
            }

            .left {
                float: left;
            }

            .clear {
                clear: both;
            }
            footer {
                position: fixed;
                bottom: 0px;
                padding: 0 10px;
            }
        </style>
        <script type="text/javascript">
            var config = {};
            config.base_path = '<?php echo base_url(); ?>';
        </script>
    </head>
    <body>
        <div id="container">
            <div id="message-error" class="alert alert-block alert-error fade in"
                 style="display: none">
                <button class="close" data-dismiss="alert">×</button>
                <h4 class="alert-heading">Có lỗi xảy ra...</h4>
                <p></p>
            </div>
            <div class="row" id="login-row">
                <div class="span4 offset4">
                    <div class="logo">
                        <img src="<?php echo base_url(); ?>static/img/logo.png" alt="Cổng thông tin thư viện điện tử"/>
                    </div>
                </div>
                <div class="span3">
                    <form id="login-form" class="hide">
                        <div class="th">Email:</div>
                        <div class="left">
                            <input id="email" type="text" value="" name="email"
                                   placeholder="Email" />
                        </div>
                        <div class="clear"></div>
                        <div class="th">Mật khẩu:</div>
                        <div class="left">
                            <input id="password" type="password" value="" name="password"
                                   placeholder="Mật khẩu" />
                        </div>
                        <div class="clear"></div>
                        <div class="th">&nbsp;</div>
                        <div>
                            <input type="submit" class="btn btn-info" value="Đăng nhập"
                                   id="login" /> &nbsp; 
                            <a href="javascript:;" style="color:#f37022"
                                   data-toggle="modal" data-target="#register-form-modal">Quên mật khẩu</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <footer>
            <p>Copyright &copy; 2012 by FlamingoStudio.vn</p>
        </footer>
        <script type="text/javascript" src="<?php echo base_url(); ?>static/js/lib/jquery.min.js"></script>
        <script src="<?php echo base_url(); ?>static/js/bootstrap/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function(){
                
                var $window = $(window);
                
                function _sendMessage(msg)
                {
                    $('#message-error').show().find('p').html(msg);
                }                

                $('#login-row').each(function(){
                    $(this).css("position","relative")
                           .css("top", (($window.height() - $(this).outerHeight()) / 2) + $window.scrollTop() - 50 + "px");
                });
                
                $('#login-form').each(function(){                    
                    $(this).css("position","absolute")
                           .css("border-left", "1px dashed #CCC")
                           .css("padding-left", "30px");
                    //.css("left", (($window.width() - $(this).outerWidth()) / 2) + $window.scrollLeft() + "px");
                }).show();  
                
                $('#login-form').on('submit', function(){
                    
                    var email = $('#email').val();
                    var password = $('#password').val();
                    
                    $.ajax({
                        url: config.base_path + 'backend/account/login',
                        type: 'post',
                        async: false,                        
                        data: {
                            email : email,
                            password : password
                        },            
                        dataType: 'json',
                        beforeSend: function(){
                            
                            if (!email)
                            {                                
                                _sendMessage('Email không hợp lệ');
                                return false;
                            }
                            
                            if (!password)
                            {
                                _sendMessage('Mật khẩu không hợp lệ');
                                return false;
                            }
                        },
                        success: function(res){                            
                            if (res.status > 0)
                            {
                                window.location.href = config.base_path + 'backend/albums';
                            }
                            else
                            {
                                _sendMessage(res.message);
                            }
                        }
                    });

                    return false;
                    
                });               
            });           
        </script>
    </body>
</html>
